<template>
	<view class="power-ranking-container">
		<view class="title">

			<view class="left-title">{{chartTitle}}</view>
			<view class="btn">

				<picker @change="datePickerChange" mode="date" :value="dateNow" range-key="label">
					<view class="uni-input">{{dateNow}}</view>
				</picker>
			</view>
		</view>


		<view class="content">
			<view class="li" v-for="(item,index) in rankList" :key="index">
				<text class="position" :style=" index < 3 ? 'color: #F38A64;' : '' ">{{ index + 1 }}</text>
				<text class="name">{{item.name}}</text>

				<uv-line-progress :percentage="30" height="6" activeColor="#5daef9"
					:showText="false"></uv-line-progress>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from "vue"
	import {
		formatDateTime
	} from "@/utils/util"
	import {
		tradtionWaterRank,

		tradtionEleRank,
		tradtionGasRank,
		tradtionWeightRank
	} from "@/api/model/trandition"
	import {
		reqGetRanking
	} from "@/api/model/photovoltaic"
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		title: {
			type: String,
			default: () => "排名"
		},
		moduleId: {
			type: [String, Number]
		},
		activeTraditionId: {
			type: String,
			default: () => ""
		}

	})

	const rankList = ref([])
	let selectDate = ref(null)
	let chartTitle = ref([])
	const dateNow = ref(null)
	// console.log("测试的", props.list)
	//获取日期
	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		dateNow.value = `${year}-${month}-${day}`
		return `${year}-${month}-${day}`;
	}
	//日期选中
	const datePickerChange = (e) => {
		let day = e.detail.value
		console.log("时间切换", e)
		dateNow.value = day
		getData(day)
	}
	//根据系统映射名称
	const getMap = () => {
		const map = {
			'water': '用水量排行',
			'ele': '用电量排行',
			'gas': '用气量排行',
			'heavy': '用电量排行',
		}
		chartTitle.value = map[props.activeTraditionId]
	}
	const getData = (day) => {
		selectDate.value = day
		let interfaceMap = {
			'water': tradtionWaterRank,
			'ele': tradtionEleRank,
			'gas': tradtionGasRank,
			'heavy': tradtionWeightRank,
			'other': ''
		}

		let typeMap = {
			'water': 2,
			'ele': '',
			'gas': 3,
			'heavy': '',
			'other': ''
		}
	
		interfaceMap[props.activeTraditionId](typeMap[props.activeTraditionId], day).then(({
			data
		}) => {
			let list = data.data
			list.forEach((item, index) => {
				item.position = index + 1;
				item.name = item.name;
				item.overValue = item.amount;
			});
			rankList.value = list;
			// console.log("收益排行数据", list)
		});


	}
	onMounted(() => {
		getDate()
		getData(dateNow.value)
		getMap()

	})

	watch(() => props.moduleId, (newVal) => {

	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.power-ranking-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				display: flex;
				justify-content: space-between;
				margin-right: 30rpx;
				width: 190rpx;

				.line {
					width: 8rpx;
					background: #909090;
					border-radius: 8rpx;
				}


				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item--0 {
						.uv-subsection__item__text {
							width: 50rpx;
							border-right: 1px solid #cccccc;
						}
					}
				}
			}

		}

		.content {
			margin-top: 10rpx;
			padding-left: 30rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;

			.li {
				margin-bottom: 18rpx;

				.position {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
				}

				.name {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.percent {
					float: right;
					margin-right: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.van-progress {
					margin-top: 20rpx;
					width: 680rpx;
					border-radius: 12rpx;
				}
			}

		}
	}
</style>